<template>
  <div class="blog-index">
    <div class="header">
      <h2>我的博客</h2>
      <button class="logout-btn" @click="logout">LogOut</button>
    </div>
    <button @click="createPost">新建博客</button>

    <div v-if="posts.length === 0" class="no-posts">
      暂无博客内容。
    </div>

    <ul class="post-list">
      <li v-for="post in posts" :key="post.id" class="post-item">
        <span class="post-title" @click="viewPost(post.id)">{{ post.title }}</span>
        <span class="post-date">{{ formatDate(post.created_at) }}</span>
      </li>
    </ul>

    <!-- 分页控件 -->
    <div class="pagination">
      <button :disabled="currentPage === 1" @click="prevPage">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button :disabled="!hasNextPage" @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
      currentPage: 1,
      totalPages: 1,
      hasNextPage: true
    };
  },
  created() {
    this.fetchBlogs(this.currentPage);
  },
  methods: {
    logout() {
    // 清除 token
    localStorage.removeItem('token');

    // 跳转到登录页
    this.$router.push('/login');
  },
    viewPost(id) {
      this.$router.push(`/post/${id}`);
    },
    async fetchBlogs(page) {
      const token = localStorage.getItem('token');
      if (!token) {
        this.$router.push('/login');
        return;
      }

      try {
        const response = await axios.get(`http://localhost:8000/api/blogs/?page=${page}`);
        this.posts = response.data.results;
        this.currentPage = response.data.page;
        this.hasNextPage = response.data.has_next;
      } catch (error) {
        console.error('获取博客失败:', error);
        alert('获取博客失败，请重试');
      }
    },
    createPost() {
      const token = localStorage.getItem('token');
      if (token) {
        this.$router.push('/new-post');
      } else {
        this.$router.push('/login');
      }
    },
    nextPage() {
      if (this.hasNextPage) {
        this.fetchBlogs(this.currentPage + 1);
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.fetchBlogs(this.currentPage - 1);
      }
    },
    formatDate(dateStr) {
      const date = new Date(dateStr);
      return date.toLocaleDateString();
    }
  }
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logout-btn {
  padding: 6px 12px;
  background-color:rgb(130, 154, 121);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.logout-btn:hover {
  background-color: #c0392b;
}
.blog-index {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.post-list {
  list-style: none;
  padding: 0;
}

.post-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.post-title {
  font-size: 16px;
  font-weight: bold;
}

.post-date {
  color: #666;
  font-size: 14px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
</style>